<template>
  <div>
    <h1>添加用户</h1>
    <el-form ref="userInfoForm" :model="userInfo" label-width="80px" class="user-content">
      <el-form-item label="微信">
        <el-input v-model="userInfo.openid" style="width: 600px"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="userInfo.mobile" style="width: 600px"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="userInfo.password" type="password" style="width: 600px"></el-input>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="userInfo.nickname" style="width: 600px"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.sex" style="width: 200px">
          <el-radio :label="1">女</el-radio>
          <el-radio :label="2">男</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄">
        <el-input v-model.number="userInfo.age" style="width: 80px" type="number"></el-input>
      </el-form-item>

      <el-form-item label="头像" >

        <el-upload
          class="upload-demo"
          action="http://localhost:8222/ucenterservice/upload/avatar"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
          :limit="20971520"

        >
          <img :src="userInfo.avatar"  class="avatar" style="height: 100px; width: 100px" />
        </el-upload>
      </el-form-item>

      <el-form-item label="用户地址">
        <el-input v-model="userInfo.address" style="width: 600px"></el-input>
      </el-form-item>

      <el-form-item>
        <router-link :to="'/application/usrlist'">
          <el-button type="primary" >取消</el-button>
        </router-link>


        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import ucenter from "@/api/ucenter";
  export default {
    name: 'UserAddForm',
    data() {
      return {
        userInfo: {
          openid: '',
          mobile: '',
          password: '',
          nickname: '',
          sex: '',
          age: null,
          avatar: 'https://guili-wenjian.oss-cn-guangzhou.aliyuncs.com/avatar/keli.jpeg',
          sign: '',
          address: ''
        }
      };
    },

    watch: {
      $route(to, from) {
        console.log("watch $route");
        this.init();
      }
    },

    created() {
      this.init();
    },

    methods: {

      init() {
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id;
          this.getInfo(id);
        } else {
          this.userInfo = {}; // 初始化数据，防止空指针错误
        }
      },


      getInfo(id){
        ucenter.getUserInfo(id).then(response => {
          this.userInfo = response.data.items; // 将列表数据赋值给this.studentInfo，用于下拉框选择
          console.log(JSON.stringify(response))
        }).catch(error=>{
          this.$message({ type: "error", message: "获取数据失败" });
          }
        );

      },





      saveOrUpdate() {
        // 保存或更新学生信息的方法，需要根据实际情况实现
        if (this.userInfo.id) {
          this.updateUserInfo();
        } else {
          this.saveUserInfo() ;
        }
      },


      updateUserInfo(){
        ucenter.updateUserInfo(this.userInfo).then(response=>{
          this.$message({ type: "success", message: "更新成功" });
          this.$router.push({ path: "/application/usrlist" });
        }).catch(error=>{
            this.$message({ type: "error", message: "更新失败" });
          }
        );
      },


      saveUserInfo() {
        ucenter.addUser(this.userInfo).then(response=>{
          this.$message({ type: "success", message: "更新成功" });
          this.$router.push({ path: "/application/usrlist" });
        }).catch(error=>{
            this.$message({ type: "error", message: "添加失败" });
          }
        );
      },


      //上传封面成功调用的方法
      handleAvatarSuccess(file) {
        const fileName = file.split("\\").pop(); // 获取图片名称
        this.userInfo.avatar =
          "http://localhost:9528/src/static/img/userAvatar/" + fileName;
        console.log("图片名称:", fileName); // 打印封面图片的名称
      },


    }
  }
</script>

<style scoped>
  .user-add-form {
    margin-top: 20px;
  }
  .user-content {
    /* 添加样式 */
  }
</style>
